<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue响应式原理模拟</title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h3>{{ msg }}</h3>
    <h3>{{ count }}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
    <h1>v-html</h1>
    <div v-html="html"></div>
    <h1>v-on</h1>
    <button v-on:click="console.log('dd')">v-on</button>
  </div>
  <script src="./05-dep.js"></script>
  <script src="./05-watcher.js"></script>
  <script src="./05-compiler.js"></script>
  <script src="./05-observer.js"></script>
  
  <script>
    // 功能
    // 负责接收初始化的参数（选项）
    // 负责把 data 中的属性注入到 Vue 实例，转换成getter/setter
    // 负责调用 observer 监听 data 中所有属性的变化
    // 负责调用 compiler 解析指令/差值表达式

    class Vue {
      constructor (options) {
        // 1. 通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        // 2. 把data中的成员转换成getter和setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3. 调用observer对象，监听数据的变化
        new Observer(this.$data)
        // 4. 调用 compiler 解析指令/差值表达式
        new Compiler(this)
      }

      // 代理数据
      _proxyData (data) {
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
          // 把data的属性注入到vue实例中
          Object.defineProperty(this, key, {
            enumerable: true,
            configurable: true,
            get () {
              return data[key]
            },
            set (newValue) {
              if (newValue === data[key]) {
                return
              }
              data[key] = newValue
            }
          })
        })
      }
    }
  </script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 0,
        person: {
          age: 18,
          name: 'wpw'
        },
        html: '<p>这是一段html代码</p>'
      },
      methods: {
        clickHandler() {
          console.log('dd')
        }
      }
    })

    // vm.msg = {
    //   test: 'hello'
    // }
  </script>
</body>
</html>